<template>
  <div class="file-view"
       v-loading="loading"
       element-loading-text="正在请求中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="file-view-title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="file-view-list" v-if="type === 'picture'">
      <div class="file-view-item" v-for="(item, index) in list" :key="item.id">
        <img :src="getUrl(item)" :preview="index" :preview-text="item.oriFileName"/>
        <div class="file-view-item__txt">
          {{ item.oriFileName }}
        </div>
        <span class="file-view-item__delete" v-if="deleteAble">
            <i class="el-icon-close" @click="onDelete(item, index)"></i>
          </span>
      </div>
    </div>
    <div class="file-view-list" v-else>
      <div class="file-view-item" v-for="(item, index) in list" :key="item.id">

        <template v-if="item.fileType.indexOf('video') >= 0">
          <video width="100%" controls="" name="media">
            <source :src="getUrl(item)" />
          </video>
        </template>

        <div class="file-view-item__txt link-color" @click="download(item)">
          {{ item.oriFileName }}
        </div>
        <span class="file-view-item__delete" v-if="deleteAble">
            <i class="el-icon-close" @click="onDelete(item, index)"></i>
          </span>
      </div>
    </div>
  </div>
</template>

<script>
import {postSysFileListAll, postSysFileDeleteId} from '$my/code/api/sys-file'
import {API_HOST, DOWN_RUL} from '@/constant';

//  <file-view :params="{xtlx: 'kckj-image', relateId: id}" type="picture" title="图片"/>
export default {
  name: 'file-view',
  cnName: '查看已经下载文件',
  props: {
    id: [String, Number],
    params: Object,
    title: String,
    type: String, // picture/media/doc
    deleteAble: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      base: API_HOST + DOWN_RUL,
      list: [],
      loading: false
    }
  },
  methods: {
    async init() {
      const res = await postSysFileListAll(this.params)
      this.list = res

      this.$nextTick(_ => {
        this.refreshPreview()
      })
    },
    onDelete(item, index) {
      this.loading = true
      postSysFileDeleteId(item.id).then(_ => {
        this.loading = false
        this.list.splice(index, 1)

        this.$nextTick(_ => {
          this.refreshPreview()
        })
      }).catch(e => {
        this.loading = false
      })
    },
    getUrl(item) {
      if(item.url && item.url.indexOf('http') === 0) {
        return item.url
      }
      return this.base + item.id
    },
    download(item) {
      window.open(this.getUrl(item))
    },
    refreshPreview() {
      this.$previewRefresh()
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.file-view {
  position: relative;

  &-title {
    margin: 10px;
  }

  &-list {
    display: flex;
    flex-wrap: wrap;
  }

  .link-color {
    color: #0c76e5;
    cursor: pointer;
  }

  &-item {
    width: 23%;
    padding: 10px;
    border: 1px dashed rgba(36, 220, 247, .3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 2%;
    margin-bottom: 10px;
    position: relative;

    img {
      max-width: 90%;
      margin: 0 auto;
      display: block;
      max-height: 120px;
    }

    &__txt {
      text-align: center;
    }

    &__delete {
      position: absolute;
      right: -8px;
      top: -10px;
      width: 18px;
      height: 18px;
      background: #F00;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      cursor: pointer;
    }
  }
}
</style>
